<template>
	<view :class="[primarySize()]">
		<view class="item" v-for="(item,index) in tasks">
			<view class="flex-box fwb fs36 lh50">
				<view class="flex-grow-1 col3 m-ellipsis pr30">{{item.name}}</view>
				<view class="col4 fs32">{{item.budget}}元/{{item.unit_text}}</view>
			</view>
			<view class="m-ellipsis">
				<!-- <view class="label">日结</view> -->
				<view class="label">{{item.gender_text}}</view>
			</view>
			<view class="m-ellipsis mt20 fs28 col3 lh40"><text v-for="cate in item.category">{{cate.name}}</text></view>
			<view class="mt10 lh30 fs22 cola5">{{item.address}}</view>
			<view class="time_box flex-box">
				<view class="tc">
					<view class="fs30 fwb col3 lh44">{{item.work_start_time}}</view>
					<view class="fs22 cola5 lh30">上班时间</view>
				</view>
				<view class="flex-grow-1">
					<view class="time_tips">工作时间
						<image src="https://admin.mosizp.cn/static/public/icon_right1.png" mode="aspectFill" class="bb1"></image>
					</view>
				</view>
				<view class="tc">
					<view class="fs30 fwb col3 lh44">{{item.work_end_time}}</view>
					<view class="fs22 cola5 lh30">下班时间</view>
				</view>
			</view>
			<view class="btn flex-box flex-center" @click="bindTaskDetail(item.id)">
				<image src="https://admin.mosizp.cn/static/public/icon22.png" mode="widthFix" class="ico28"></image>
				<view class="pl10 colf fs28 fwb">查看详情</view>
			</view>
		</view>
		
	
	
	</view>
</template>

<script>
	const app = getApp();
	export default {
		name: "task-list",
		props: {
			tasks: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				
			};
		},
		created() {
			;
		},
		methods: {
			bindTaskDetail(id) {
				uni.navigateTo({
					url: '/pages/public/odd_job_info?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.item {
		width: 100%;
		padding: 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;

		&+& {
			margin-top: 20rpx;
		}

		.label {
			display: inline-block;
			vertical-align: top;
			padding: 0 8rpx;
			font-size: 22rpx;
			color: #A5A5A5;
			height: 32rpx;
			background: #ECEFF5;
			border-radius: 4rpx;
			margin-right: 10rpx;
			margin-top: 10rpx;
		}

		.time_box {
			width: 100%;
			height: 122rpx;
			background: #F8F8F8;
			border-radius: 8rpx;
			margin-top: 20rpx;
			padding: 0 20rpx;
		}

		.time_tips {
			width: 120rpx;
			height: 49rpx;
			line-height: 49rpx;
			text-align: center;
			font-size: 22rpx;
			color: var(--primary);
			margin-left: auto;
			margin-right: auto;
			background: #E1E9F5;
			border-radius: 28rpx;
			position: relative;

			.bb1 {
				width: 310rpx;
				height: 7rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
			}
		}

		.btn {
			width: 100%;
			height: 90rpx;
			background: var(--primary);
			border-radius: 8rpx;
			margin-top: 30rpx;
		}
	}


</style>